<template>
    <div class="view_wrapper">
        <div class="view_group">
            <img class="picture" :src="productUrl" alt="" />
            <div class="pro_intro">        
                <h5 class="pro_title">sleaaaa<span>进行中</span></h5>
                <p class="activity_time">活动时间：23234345534</p>                
                <p class="pro_number">关联商品：Test2</p>
            </div>
        </div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="活动概况" name="first">
                <h6 class="data_title">*数据更新至昨日</h6>
                <div class="tab_title_group">
                    <div class="tab_title_item">
                        <h5>访客数</h5>
                        <h3>2</h3>
                        <p>分享访客数：2</p>
                    </div>
                    <div class="tab_title_item">
                        <h5>访客次数</h5>
                        <h3>5</h3>
                    </div>
                    <div class="tab_title_item">
                        <h5>付费用户</h5>
                        <h3>1</h3>
                        <p>首次付费用户：0</p>
                    </div>
                    <div class="tab_title_item">
                        <h5>支付订单数</h5>
                        <h3>1</h3>
                        <p>分享访客数：2</p>
                    </div>
                    <div class="tab_title_item">
                        <h5>成交金额</h5>
                        <h3>0.00</h3>
                    </div>
                </div>
                <div class="echart_filter">
                    <h6 class="echart_title">访问成交趋势</h6>
                    <el-date-picker
                        v-model="echartTime"
                        type="daterange"
                        @change="filterEchartDate"
                        :picker-options="timeLimitOptions"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </div>
                <div class="echart_legend">
                    <label>访问指标：</label>
                    <el-radio-group v-model="visitNumber" @input="chooseVisitDevice">
                        <el-radio label="a">访问次数</el-radio>
                        <el-radio label="b">访客数</el-radio>
                        <el-radio label="c">分享访客数</el-radio>
                    </el-radio-group>
                    <label style="margin: 0 0 0 60px;">成交指标：</label>
                    <el-radio-group v-model="visitNumber" @input="chooseVisitDevice">
                        <el-radio label="d">付费用户</el-radio>
                        <el-radio label="e">支付单数</el-radio>
                        <el-radio label="f">成交金额</el-radio>
                        <el-radio label="g">已成团数</el-radio>
                        <el-radio label="h">总团数</el-radio>
                    </el-radio-group>
                </div>
                <div id="visit_trend" class="visit"></div>
            </el-tab-pane>
            <el-tab-pane label="拼团明细" name="second">
                <div class="filter_group">
                    <el-button @click="exportFile">导出</el-button>
                    <div class="search_filter">
                        <el-form :inline="true" :model="tableParams" class="demo-form-inline">
                            <el-form-item>
                                <el-select v-model="tableParams.status" placeholder="全部状态">
                                    <el-option
                                        v-for="item in statusOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>                            
                            <el-form-item>
                                <el-input v-model="tableParams.keyword" placeholder="输入团长/团员昵称"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button @click="searchTableData">搜索</el-button>
                            </el-form-item>
                        </el-form>                        
                    </div>
                </div>
                <div class="team_table">
                    <el-table :data="teamworkData" border style="width: 100%">
                        <el-table-column  prop="activityName" label="团长" width="250"></el-table-column>
                        <el-table-column  prop="activityType" label="拼团类型" width="200"></el-table-column>
                        <el-table-column  prop="activityPrice" label="开始时间" width="250"></el-table-column>
                        <el-table-column  prop="status" label="结束时间" width="250"></el-table-column>
                        <el-table-column  prop="hasTime" label="状态" width="200"></el-table-column>
                        <el-table-column  prop="hasNumber" label="真实参团人数（人）" width="150"></el-table-column>
                        <el-table-column  fixed="right" label="操作" width="300">
                            <template slot-scope="scope">
                                <el-button type="text" size="small" @click="joinTeam(scope.row)">参团人员详情</el-button>
                                <el-button type="text" size="small" @click="onceJoinTeam(scope.row)">一键模拟拼团</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-tab-pane>
        </el-tabs>
        <el-dialog
            title="真实参团人员详情"
            :visible.sync="dialogJoinTeamVisible"
            :close-on-click-modal="false"
            width="700px"
            :before-close="handleCloseJoinTeam">
            <div class="share_body">
                <el-table
                    :data="shareData"
                    style="width: 100%">
                    <el-table-column
                        prop="username"
                        label="用户"
                        width="150">
                        <template slot-scope="{row}">
                            <img class="userAvator" :src="row.userAvator" alt="" />
                            <span class="username">{{ row.username }}</span> 
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="joinTime"
                        label="参团时间"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="type"
                        label="下单类型"
                        width="100">
                    </el-table-column>
                    <el-table-column
                        prop="status"
                        label="参团状态"
                        width="80">
                    </el-table-column>
                    <el-table-column
                        prop="orderId"
                        label="关联订单"
                        :show-overflow-tooltip="true"
                        width="150">
                        <template slot-scope="{row}">                            
                            <el-button type="text" @click="handlerOrderDetails(row)">{{ row.orderId }}</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>    
        </el-dialog>
        <el-dialog
            v-if="orderRow"
            title="订单详情"
            :visible.sync="dialogOrderVisible"
            :close-on-click-modal="false"
            width="1100px"
            :before-close="handleCloseOrder">
            <div class="order_body">
                <div class="order_message">
                    <h4>订单信息</h4>
                    <dl class="order_list">
                        <dd class="order_item">
                            <span>订单号：{{ orderRow.orderId }}</span>
                            <span>下单时间：{{ orderRow.joinTime }}</span>
                            <span>支付时间：{{ orderRow.joinTime }}</span>
                            <span>结算时间：{{ orderRow.joinTime }}</span>
                        </dd>
                        <dd class="order_item">
                            <span>订单类型：{{ orderRow.type }}</span>
                            <span>支付方式：{{ orderRow.type }}</span>
                            <span>收款方式：{{ orderRow.type }}</span>
                            <span>渠道来源：{{ orderRow.type }}</span>
                        </dd>
                        <dd class="order_item">
                            <span>订单状态：{{ orderRow.status }}</span>
                            <span>优惠信息：{{ orderRow.status }}</span>
                            <span>营销活动：{{ orderRow.status }}</span>
                            <span>分销信息：{{ orderRow.status }}</span>
                        </dd>
                    </dl>
                    <h4>支付信息</h4>
                    <dl class="order_list">
                        <dd class="order_item">
                            <span>支付单号：{{ orderRow.orderId }}</span>
                        </dd>
                        <dd class="order_item">
                            <span>商户单号：{{ orderRow.type }}</span>
                        </dd>                        
                    </dl>
                    <h4>买家信息</h4>
                    <dl class="order_list">
                        <dd class="order_item">
                            <span>买家昵称：{{ orderRow.username }}</span>
                            <span>买家留言：{{ orderRow.username }}</span>                
                        </dd>
                        <dd class="order_item">
                            <span>买家手机号：{{ orderRow.type }}</span>
                        </dd>  
                        <dd class="order_item">
                            <span>信息采集手机号：{{ orderRow.type }}</span>
                        </dd>                       
                    </dl>
                    <h4>发票信息</h4>
                    <dl class="order_list">
                        <dd class="order_item">
                            <span>发票抬头：{{ orderRow.username }}</span>
                            <span>注册电话：{{ orderRow.username }}</span>                
                            <span>收票邮箱：{{ orderRow.username }}</span>                
                        </dd>
                        <dd class="order_item">
                            <span>企业税号：{{ orderRow.type }}</span>
                            <span>开户银行：{{ orderRow.type }}</span>
                            <span>收票手机号：{{ orderRow.type }}</span>
                        </dd>  
                        <dd class="order_item">
                            <span>注册地址：{{ orderRow.type }}</span>
                            <span>银行账户：{{ orderRow.type }}</span>
                        </dd>                       
                    </dl>
                </div>
            </div>    
        </el-dialog>
    </div>    
</template>

<script>
export default{
    data(){
        return {
            activeName: 'first',
            productUrl: require('@/assets/img/img.jpg'), 
            statusOptions: [
                { value: 0, label: '全部状态' },
                { value: 1, label: '待成团' },
                { value: 2, label: '拼团成功' },
                { value: 3, label: '拼团失败' },
            ],
            tableParams: {
                status: null,
                keyword: '',
            },
            teamworkData: [
                { id: 'aaabbb',activityName: '',activityType: '',activityPrice: '',status: null,hasTime: '2024-02-24 00:00:00',hasNumber: 5,total: 8,teamType: 0 },
                { id: 'cccddd',activityName: '',activityType: '',activityPrice: '',status: null,hasTime: '2024-02-24 00:00:00',hasNumber: 5,total: 8,teamType: 1 },
                { id: 'dddeee',activityName: '',activityType: '',activityPrice: '',status: null,hasTime: '2024-02-24 00:00:00',hasNumber: 5,total: 8,teamType: 2 },
            ],
            dialogJoinTeamVisible: false,
            dialogOrderVisible: false,
            visitNumber: 'a',
            curDate: new Date(),
            echartTime: '',
            xAxisData: [],
            seriesData: [10,32,32,23,12,3],
            timeLimitOptions: {
                disabledDate(time){
                    return time.getTime() >= Date.now() - 8.64e6;
                }
            },
            shareData: [
                {username: '星仔',userAvator: 'https://wechatavator-1252524126.file.myqcloud.com/app0t0g85ci2440/image/compress/6a24a24a44af3fe6d3f180a5dee743b3_20240221_e29225.jpeg',joinTime: '2024-02-18 15:12:36',type: '非首次下单',status: 1,orderId: 'o_1708499299_65d5a163f4cfa_867207V2'},
            ],
            orderRow: null,
        }
    },
    computed: {
        
    },
    created(){

    },
    mounted(){
        this.initEchartTime();
        this.getVisitTrend();
    },
    methods: {
        handleClick(tab, event) {
            console.log(tab, event);
        },
        searchTableData(){  // 表格筛选搜索
            console.log('当前表格筛选参数：',this.tableParams)
        },
        chooseVisitDevice(val){ // 当前指标类型
            console.log('当前指标：',val);
        },
        joinTeam(rows){ // 数据表格行参团人员详情
            console.log('参团人员详情',rows);
            this.dialogJoinTeamVisible = true;
        },
        onceJoinTeam(rows){ // 数据表格行一键模拟拼团
            console.log('一键模拟拼团：',rows);
        },
        handleCloseJoinTeam(){ // 推广弹框关闭
            this.dialogJoinTeamVisible = false;
        },
        handleCloseOrder(){ // 推广订单详情关闭
            this.dialogOrderVisible = false;
        },
        filterEchartDate(val){  // 访问成交趋势日期选择
            console.log(val);
            console.log(this.echartTime);
        },
        exportFile(){   // 导出
            console.log('导出');
        },
        initEchartTime(){   // 初始化echart日期为近6天
            this.curDate = new Date();
            for(let i = 0;i < 6;i++){
                let formattedDate = `${this.curDate.getFullYear()}-${(this.curDate.getMonth() + 1).toString().padStart(2, '0')}-${this.curDate.getDate().toString().padStart(2, '0')}`;
                this.xAxisData.unshift(formattedDate);
                this.curDate.setDate(this.curDate.getDate() - 1);
            }    
        },
        getVisitTrend(){    // 访问成交趋势
            let echart = this.$echarts.init(document.getElementById('visit_trend'));
            let self = this;
            let configOptions = {
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    formatter: function (params) {
                        let obj = {'a': '访客次数','b': '访客数','c': '分享访客数','d': '付费用户','e': '支付单数','f': '成交金额','g': '已成团数','h': '总团数'};
                        return '日期：' + params[0].name + '<br/>' +obj[self.visitNumber]+'：'+ params[0].value;
                    },
                    textStyle: {

                    }
                },
                grid: {
                    left: '0',
                    right: '0',
                    bottom: '20',
                    containLabel: true
                },
                xAxis: {
                    data: this.xAxisData
                },
                yAxis: {},
                series: [
                    {
                        type: 'line',
                        data: this.seriesData,
                        itemStyle: {
                            color: '#105cfb',
                        }
                    }
                ]

            };
            configOptions && echart.setOption(configOptions);
            window.addEventListener('resize',function(){
                echart.resize();
            })
        },
        handlerOrderDetails(row){   // 关联订单
            console.log(row);
            this.orderRow = row;
            this.dialogOrderVisible = true;
        }
    }
}
</script>

<style lang="scss" scoped>
.view_wrapper{
    min-width: 1010px;
    .view_group{
        display: flex;
        background-color: #ffffff;
        padding: 10px;
        margin: 10px 0;
        .picture{
            display: block;
            width: 100px;
            height: 100px;
            border-radius: 4px;
            background-color: #eee;
            margin: 0 10px 0 0;
        }
        .pro_intro{
            .pro_title{
                font-size: 15px;
                font-weight: normal;
                line-height: 30px;
                span{
                    display: inline-block;
                    margin: 0 0 0 5px;
                    border-radius: 3px;
                    padding: 0 4px;
                    background-color: green;
                    font-size: 12px;
                    line-height: 18px;
                    color: #fff;
                }
            }
            .activity_time{
                font-size: 13px;
                font-weight: normal;
            }
            .pro_number{
                font-size: 13px;
                color: #999;
                margin: 30px 0 0 0;
            }
        }
    }
    .el-tabs{
        background-color: #fff;
        ::v-deep .el-tabs__nav-scroll{
            padding: 0 0 0 20px;
        }
        ::v-deep .el-tabs__content{
            padding: 0 20px 20px 20px;
            .data_title{
                font-size: 14px;
                font-weight: normal;
                line-height: 32px;
                color: #999;
            }
            .tab_title_group{
                display: flex;
                align-items: center;
                margin: 0 0 20px 0;
                .tab_title_item{
                    flex-shrink: 1;
                    padding: 20px 16px;
                    margin-right: 20px;
                    width: 20%;
                    height: 100px;
                    background: #fff;
                    border-radius: 4px;
                    border: 1px solid #eee;
                    h5{
                        font-size: 16px;
                        font-weight: 700;
                        color: #999;
                        line-height: 22px;
                    }
                    h3{
                        margin-top: 8px;
                        height: 50px;
                        font-size: 36px;
                        font-weight: 700;
                        color: #333;
                        line-height: 50px;
                    }
                    p{
                        display: flex;
                        -webkit-align-items: center;
                        align-items: center;
                        margin-top: 8px;
                        height: 22px;
                        font-size: 16px;
                        color: #999;
                        line-height: 22px;
                    }
                }
            }
            .echart_filter{
                display: flex;
                justify-content: space-between;
                align-items: center;
                background-color: #f5f7fa;
                padding: 10px;
                margin: 0 0 10px 0;
                .echart_title{
                    display: flex;
                    align-items: center;
                    font-size: 16px;
                    &::before{
                        content: '';
                        display: inline-block;
                        width: 3px;
                        height: 14px;
                        background-color: #105cfb;
                        margin: 3px 5px 0 0;
                    }
                }
            }
            .filter_group{
                display: -webkit-box;
                justify-content: space-between;
            }
            .echart_legend{                
                label{
                    font-size: 14px;
                    font-weight: bold;
                }
            }
            .visit{
                height: 300px;
            }
        }
    }   
}
.share_body{
    .userAvator{
        float: left;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin: 0 10px 0 0;
    }
    .username{
        display: inline-block;
        line-height: 40px;
    }
}
.order_body{
    .order_message{
        h4{
            font-size: 15px;
            font-weight: bold;
            margin: 0 0 20px 0;
        }
        .order_list{
            overflow: hidden;
            .order_item{
                float: left;
                width: 330px;
                margin: 0 20px 0 0;
                span{
                    display: block;
                    line-height: 30px;
                }
            }
        }        
    }
}
</style>